<script setup lang='ts'>
const data = [
  {
    process: '流程01',
    region: '华东',
    sales: '销售A',
    inquiryCost: 100000,
    internalCost: 150000,
    grossProfit: 400000,
    externalCost: 120000,
    grossMargin: 45.5,
    netMargin: 25.0,
  },
  {
    process: '流程02',
    region: '华北',
    sales: '销售B',
    inquiryCost: 120000,
    internalCost: 180000,
    grossProfit: 450000,
    externalCost: 150000,
    grossMargin: 47.0,
    netMargin: 27.8,
  },
  {
    process: '流程03',
    region: '华南',
    sales: '销售C',
    inquiryCost: 110000,
    internalCost: 160000,
    grossProfit: 500000,
    externalCost: 130000,
    grossMargin: 51.0,
    netMargin: 30.0,
  },
  {
    process: '流程04',
    region: '华东',
    sales: '销售A',
    inquiryCost: 90000,
    internalCost: 140000,
    grossProfit: 300000,
    externalCost: 110000,
    grossMargin: 52.5,
    netMargin: 28.6,
  },
  {
    process: '流程05',
    region: '华北',
    sales: '销售B',
    inquiryCost: 105000,
    internalCost: 160000,
    grossProfit: 450000,
    externalCost: 140000,
    grossMargin: 46.0,
    netMargin: 28.6,
  },
  {
    process: '流程06',
    region: '华南',
    sales: '销售C',
    inquiryCost: 130000,
    internalCost: 200000,
    grossProfit: 500000,
    externalCost: 170000,
    grossMargin: 50.0,
    netMargin: 30.0,
  },
  {
    process: '流程07',
    region: '华东',
    sales: '销售A',
    inquiryCost: 60000,
    internalCost: 90000,
    grossProfit: 200000,
    externalCost: 70000,
    grossMargin: 44.4,
    netMargin: 27.5,
  },
  {
    process: '流程08',
    region: '华北',
    sales: '销售B',
    inquiryCost: 100000,
    internalCost: 160000,
    grossProfit: 400000,
    externalCost: 150000,
    grossMargin: 50.0,
    netMargin: 30.0,
  },
  {
    process: '流程09',
    region: '华南',
    sales: '销售C',
    inquiryCost: 50000,
    internalCost: 80000,
    grossProfit: 220000,
    externalCost: 70000,
    grossMargin: 51.2,
    netMargin: 31.1,
  },
  {
    process: '流程10',
    region: '华东',
    sales: '销售A',
    inquiryCost: 120000,
    internalCost: 180000,
    grossProfit: 500000,
    externalCost: 170000,
    grossMargin: 48.5,
    netMargin: 29.2,
  },
  {
    process: '流程11',
    region: '华北',
    sales: '销售B',
    inquiryCost: 100000,
    internalCost: 160000,
    grossProfit: 450000,
    externalCost: 140000,
    grossMargin: 47.2,
    netMargin: 28.3,
  },
]
const region = ref('全部')
const saler = ref('全部')
const lr = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
      formatter(params) {
        const index = params[0].dataIndex // 获取当前索引
        const processInfo = data[index] // 获取对应的流程信息

        let tooltipContent = `流程: ${processInfo.process}<br/>`
        tooltipContent += `区域: ${processInfo.region}<br/>`
        tooltipContent += `销售: ${processInfo.sales}<br/>`

        params.forEach((param) => {
          tooltipContent += param.seriesName.includes('率') ? `${param.seriesName}: ${param.value}%<br/>` : `${param.seriesName}: ${param.value}<br/>`
        })

        return tooltipContent
      },
    },
    grid: {
      left: 10,
      right: 10,
      bottom: 10,
      containLabel: true,
    },
    legend: {
      data: ['询价成本', '网内成本', '毛利润', '外采成本', '毛利率', '净利率'],
    },
    xAxis: [
      {
        type: 'category',
        data: ['流程01', '流程02', '流程03', '流程04', '流程05', '流程06', '流程07', '流程08', '流程09', '流程10', '流程11'],
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          interval: 0, // 横轴信息全部显示
          rotate: 30, // 度角倾斜显示
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：元',
        min: 0,
        max: 1200000,
        interval: 200000,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        name: '单位：%',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value}%',
        },
      },
    ],
    series: [
      {
        name: '询价成本',
        type: 'bar',
        barWidth: 30,
        stack: '销售成本',
        data: data.map(item => item.inquiryCost),
      },
      {
        name: '网内成本',
        type: 'bar',
        barWidth: 30,
        stack: '销售成本',
        data: data.map(item => item.internalCost),
      },
      {
        name: '毛利润',
        barWidth: 30,
        type: 'bar',
        stack: '利润',
        data: data.map(item => item.grossProfit),
      },
      {
        name: '外采成本',
        type: 'bar',
        barWidth: 30,
        stack: '利润',
        data: data.map(item => item.externalCost),
      },
      {
        name: '毛利率',
        type: 'line',
        yAxisIndex: 1,
        data: data.map(item => item.grossMargin),
      },
      {
        name: '净利率',
        type: 'line',
        barWidth: 30,
        yAxisIndex: 1,
        data: data.map(item => item.netMargin),
      },
    ],
  }
})
const datevalue = ref('')
</script>

<template>
  <el-card shadow="always" :body-style="{ padding: '10px' }">
    <template #header>
      <div flex-y-center text-lg>
        项目利润分析
        <div mx-3 flex-y-center gap-1 text-sm>
          <label for="region">区域:</label>
          <el-select v-model="region" placeholder="选择区域" class="!w-30">
            <el-option label="全部" value="" />
            <el-option label="华东" value="华东" />
            <el-option label="华南" value="华南" />
          </el-select>
        </div>
        <div flex-y-center gap-1 text-sm>
          <label for="region">销售:</label>
          <el-select v-model="region" placeholder="选择销售" class="!w-30">
            <el-option label="全部" value="" />
            <el-option label="销售A" value="华东" />
            <el-option label="销售B" value="华南" />
          </el-select>
        </div>
        <div mx2 flex-y-center gap-1 text-sm>
          <el-date-picker v-model="datevalue" type="daterange" placeholder="选择日期时间" />
        </div>
      </div>
    </template>
    <Echart :options="lr" h-100 />
  </el-card>
</template>

<style scoped lang='scss'>

</style>
